<template>
  <div class="c-bg-sgray">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="c-pt60 c-flex-column c-justify-sa c-h" v-if="(!refereeAndUser&&!Info.isTeacher)&&Info.enableShow2==0">
      <loading-status-tem :noDataText="'暂无私密打卡查看权限'" :noData="true"></loading-status-tem>
      <!-- <div class="back-index" @click="clickGoIndex">{{from == 'course' || from == 'myExam' || from == 'reservationSection' || from == 'form' ? '返回上一页' : from == 'booking' ? '返回师资列表' : (from == 'vipCollage' ? '返回会员升级' : '返回首页')}}</div> -->
      <div class="c-mh72 c-fs28 c-fc-white theme-bg c-pv16 c-flex-row c-justify-center c-br36" @click="clickGohomeworke">了解打卡</div>
    </div>
    <div v-else>
      <div class="c-bg-white c-br8 c-pt20 c-pb20" v-if="Info">
        <div class="c-flex-row c-ph40 c-aligni-center">
          <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(Info.headimgurl, require('@/assets/defult_head.png'))" alt="" />
          <div class="c-pl20 c-flex-grow1 c-w0 c-flex-row c-aligni-center">
            <div class="c-flex-grow1 c-flex-column c-justify-center c-aligni-start">
              <div class="c-fs24 c-flex-row c-aligni-center">
                <span class="c-pr20 c-text-ellipsis1 c-ww180">{{
                  Info.nickname
                }}</span>
              </div>
              <div class="c-fs24 c-flex-row c-aligni-center">
                <div class="c-fs18 c-fc-gray c-flex-row c-aligni-center">
                  <span v-if="workType == 1">
                    已打卡{{ Info.finishNum }}天</span>
                  <span v-else-if="workType == 2">
                    已完成{{ Info.finishNum }}个作业</span>
                  <span v-else>
                    已打卡{{ Info.finishNum }}个课时</span>
                </div>
              </div>
            </div>
            <div class="c-flex-column c-aligni-center c-flex-center" @click="goSpread" v-if="refereeAndUser&&!clockInInfo.isFriendHelper && !clockInInfo.collage && clockInInfo.sales == null && clockInInfo.bargain == null">
              <i class="iconfont c-fc-sblack c-fs28/">&#xe89e;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">邀请好友</div>
            </div>
            <div v-if="Info.isOpenLongPic==1" class="c-flex-column c-aligni-center c-flex-center c-ml40" @click="clickBuildImg">
              <i class="iconfont c-fc-sblack c-fs28">&#xe745;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">生成长图</div>
            </div>
            <div v-if="refereeAndUser&&((Info.isDisAgainSign)||Info.enableDelete)" class="c-flex-column c-aligni-center c-flex-center c-ml40" @click.stop="calcOperation(Info,index)">
              <i class="iconfont c-fc-sblack c-fs28">&#xe8a6;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">更多</div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-ph24 c-bg-sgray c-pb84 c-pb200">
        <article class="c-mt20 c-bg-white c-br8 c-ph20 c-pt30 c-pb40 c-text-hidden">
          <!-- <h2 class="c-pb40 c-fs30 c-fw-b">答题卡</h2> -->
          <section>
            <clock-aswer-ai ref="clockaswerai" :clockInId='clockInId' :refereeId='refereeId' :examMainId="examMainId" :isSmallWidth="false" @InfoRes="InfoRes" @getInfo="getInfo" :curHwId="curHwId" :totalNum="totalNum" :showAiResutl="showAiResutl"></clock-aswer-ai>
          </section>
          <clock-aswer-content v-if="Info" :isPl="false" class="c-bg-white c-pt40" @clickZan="clickZan" @clickCom="clickCom" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" :playAduioSrc="playAduioSrc"
            :aswerInfo="Info" :aswerIndex="Info.encodeUserId==userId?-1:index" :isTeacher="Info.isTeacher">
          </clock-aswer-content>
        </article>
      </div>
      <!-- 生成长图按钮 -->
      <div class="c-pf c-p-b0 c-t-l0 c-fs24 c-w100 c-flex-row c-justify-sb c-hh100 c-bg-white c-ph24 c-bd-t1 c-aligni-center">
        <!-- <div class="c-flex-column c-aligni-center c-flex-center" @click="goSpread" v-if="refereeAndUser&&!clockInInfo.isFriendHelper && !clockInInfo.collage && clockInInfo.sales == null && clockInInfo.bargain == null">
          <i class="iconfont c-fc-xblack c-fs32">&#xe8b0;</i>
          <div class="c-fc-xblack c-fs18 c-mt2">邀请好友</div>
        </div>
        <div v-if="Info.isOpenLongPic==1" class="c-flex-column c-aligni-center c-flex-center" @click="clickBuildImg">
          <i class="iconfont c-fc-xblack c-fs32">&#xe745;</i>
          <div class="c-fc-xblack c-fs18 c-mt2">生成长图</div>
        </div> -->
        <footer class="c-ww600 c-flex-row c-fs28 c-justify-center c-br32 c-text-hidden">
          <div v-if="ttId && campButtonStatus && campButtonStatus.campPermission && !campButtonStatus.isTeacher" class="c-flex-grow1 c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1 c-bd1-ccc c-br32 c-text-hidden">
            <div @click="handleCampDirectory(0)" class="c-textAlign-c c-hh64 c-lh64 c-w28 c-bd-r1-ccc">目录</div>
            <div @click="handleCampDirectory(-1)" :class="[campButtonStatus && campButtonStatus.isPrev ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-bd-r1-ccc"><span v-show="campButtonStatus.isPrev && !campButtonStatus.isPrevUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>上一任务</div>
            <div @click="handleCampDirectory(1)" :class="[campButtonStatus && campButtonStatus.isNext ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-br-tr32 c-br-br32"><span v-show="campButtonStatus.isNext && !campButtonStatus.isNextUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>下一任务</div>
          </div>
          <div v-else @click="clickGohomeworke" class="c-flex-grow1 c-w0 c-flex-row c-flex-center c-hh64 c-fc-white theme-bg">返回主页</div>
        </footer>
      </div>
      <div v-if="ttId && campButtonStatus && campButtonStatus.campPermission && !campButtonStatus.isTeacher"
        class="c-pf c-p-r0 c-p-b300 c-flex-row c-justify-center c-aligni-center theme-bg c-pl16 c-pv10 c-pr12 c-br-tl24 c-br-bl24"
        @click="clickGohomeworke">
        <div class="c-fs20 c-fc-white c-ml4">返回主页</div>
      </div>
    </div>
    <!-- 训练营目录 -->
    <campDirectoryDialog v-if="ttId" ref="campDirectory"></campDirectoryDialog>
    <!-- ai题长图 -->
    <div class="anvasBox">
      <div class="anvasContent anvasContentbg" id="canvas1"  :style="longImgBgUrl">
        <div v-if="Info" style="padding-top:40px;padding-bottom:40px">
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="Info.headimgurl || require('@/assets/defult_head.png')" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{Info.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{Info.createdAt}}</div>
            </div>
          </div>
          <div style="margin:0 30px;border-bottom-left-radius:16px;border-bottom-right-radius:16px">
            <div v-if="Info" class="c-bg-white" style="padding: 0px 24px 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
              <section class="c-flex-row c-aligni-center">
                <div class="c-p">
                  <img style="width: 92px;height: 108px;" :src="require('@/assets/i/wap/clockIn/clock-level.png')" alt="">
                  <div class="c-pa c-fc-white c-p-l0 c-p-r0 c-center c-fw600 c-textAlign-c" style="top: 16px;font-size: 36px;">
                    {{Number(Info.answerContent.score).toFixed(0)}}
                  </div>
                </div>
                <!-- <div class="c-ww76 c-hh60 c-textAlign-c c-pt10 c-fs36 c-fc-white c-bg-xlyellow c-p c-fw-b">
                  <span class="bottom-triangle c-pa"></span>
                  <span class="bottom-triangle-text c-fs22 c-pa c-fw-b">分</span>
                </div> -->
                <div class="c-flex-grow1" style="padding-left: 28px;">
                  <div class="c-flex-row c-aligni-center">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 20px;padding-bottom:6px">完整度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + Info.answerContent.completion + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:6px">{{completionLevel}}</span>
                  </div>
                  <div class="c-flex-row c-aligni-center" v-if="Info.answerContent.fluencyScore!==''||Info.answerContent.fluencyScore!==null">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 20px;padding-bottom:6px">流畅度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + Info.answerContent.fluencyScore + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:6px">{{fluencyScore}}</span>
                  </div>
                  <div class="c-flex-row c-aligni-center" v-if="Info.answerContent.accuracyScore!==''||Info.answerContent.accuracyScore!==null">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 20px;padding-bottom:6px">准确度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + Info.answerContent.accuracyScore + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:16px">{{accuracyScore}}</span>
                  </div>
                </div>
              </section>
              <!-- 语音 -->
              <div v-if="Info" class="c-flex-row c-aligni-center" style="padding-top:30px">
                <!-- <div style="width:326px;height:60px;padding:0 18px;border-radius:8px" class="c-bg-xgreen c-flex-row c-aligni-center">
                  <img class="c-rotate180" style="width:30px;height:30px;" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
                  <div class="c-flex-grow1 c-w0 c-textAlign-r c-fc-white" style="font-size:20px;padding:0 20px">{{Info.answerContent.recordTime}}"</div>
                </div> -->
                <div class="theme-bg-10 c-flex-row c-aligni-center" style="width: 166px;height: 60px;border-radius: 30px;padding:0 24px;">
                  <div class="iconfont c-fs36 theme-fc c-mr10" style="padding-bottom:16px">&#xe738;</div>
                  <div class="theme-fc" style="font-size: 20px;padding-bottom:16px">{{Info.answerContent.recordTime}}"</div>
                </div>
              </div>
              <section v-if="Info" style="font-size:24px;margin-top:20px">
                <template v-if="Info.answerContent.answer.length > 0">
                  <span :class="item.score > 60 ? 'c-fc-deepGreen':'c-fc-xlred'" v-for="(item,index) in Info.answerContent.answer" :key="index">
                    {{Info.answerContent.content.split(' ')[index]}}
                  </span>
                </template>
                <template v-else>
                  <span class="c-fc-xlred" style="letter-spacing: 2px;">{{Info.content}}</span>
                </template>
              </section>
              <div class="c-fc-gray" style="font-size: 24px;padding-top: 20px;" v-if="Info && Info.translate">
                {{Info.translate}}
              </div>
            </div>
            <!-- line -->
            <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-1px">
              <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
            </div>
            <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
              <div class="c-flex-row c-alignc-center c-flex-center">
                <div style="width:88px"><img :src="Info.qrCodeUrl" alt=""></div>
                <div class="c-flex-grow1" style="margin-left:18px">
                  <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{Info.name}}</div>
                  <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 长图展示 -->
    <div v-show="isShowMasker" class="c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100">
      <div class="c-translucent-balck60 c-h c-w100 c-pa c-p-t0 c-p-l0"></div>
      <article class="c-textAlign-l  c-pf c-p-tp50 c-p-tp50 c-translate-y-50 c-p-l0 c-p-r0 c-m-0auto c-ww500">
        <div id="longSpreadImg" class="c-maxhlongImg c-contexty-scroll c-pb160">
          <img @click.stop="clickImg(event)" class="c-ww500 c-m-0auto c-br20" alt>
        </div>
      </article>
      <div class="c-bg-white c-bd-t1 c-w100 c-ph24 c-pt30 c-pb20 c-br-tr20 c-br-tl20 c-hh260 c-pa c-p-b0">
        <div class="c-w100 c-p">
          <i class="iconfont c-fc-gray c-fs18 c-pa c-p-r0 c-p-t0" @click.stop="closeShowMasker">&#xe61b;</i>
          <div class="c-pb30  c-br24 c-fs24 c-flex-center c-flex-row c-m-0auto c-mt12 c-fc-sblack c-fw600">长按上面图片保存海报</div>
          <div id="scroll" class="c-contexty-hidden c-contextX-scroll c-ws-n" style="overflow: auto;">
            <!--  -->
            <div class="c-p c-mr20 c-inlineblack c-text-hidden c-br10" :class="longImgBg==index?'theme-bd2 c-ww104 c-hh108':'c-ww84 c-hh88'" v-for="(item,index) in smallImg" :key="index" @click="chooseImgbg(index)">
              <img :src="item.url" alt="" class="c-h c-w100 img-pe-none c-object-fit-cover">
              <div class="c-flex-row c-flex-center c-pa c-p-b6 c-p-r6 c-brp50 c-ww32 c-hh32 theme-bg c-bd2-white" v-show="longImgBg==index">
                <i class="iconfont c-fc-white c-fs20">&#xe76c;</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 日签 -->
    <day-sign ref="daysign" :showSignDay="showSignDay" :signDayInfo="signDayInfo" @closeSignDay="closeSignDay" @canvasOver="canvasOver"></day-sign>
    <cj-actionsheet v-model="myOperationShow" :item-list="operationMenu" @choose="clickOperationMenu" show-cancel></cj-actionsheet>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <!-- 教师评论(评分和设置精选) -->
    <clock-tea-comment-com enHwId="enHwId" :clockInId="clockInId" :curSelectDate="curDate" :curId="curHwId"
      :enDate="enDate" :teacher="1" :enableLongAudio='enableLongAudio' :playAduioSrc="playAduioSrc" :showTeaCommentModal="showTeaCommentModal" :workType="workType" :resultIndex="resultIndex" :resultInfo="resultInfo" :imgData="imgData"
      @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-tea-comment-com>
    <!-- 非教师评论 -->
    <clock-comment-com enHwId="enHwId" :clockInId="clockInId"
      :enDate="enDate" :enableLongAudio='enableLongAudio' @clickShowVideo="clickShowVideo" :comType="comType" :isTeacher="Info.isTeacher" :playAduioSrc="playAduioSrc" :showCommentModal="showComInput" :inputCom="inputCom" :replyName="replyName"
      :curComId="curComId" :replyId="replyId" :imgData="imgData" @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-comment-com>
  </div>
</template>
<script>
import clockAswerAi from "@/components/templates/clockIn/clockAswerAi.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js"
import DaySign from "./daySign.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import clockAswerContent from "@/components/templates/clockIn/clockAswerContent.vue";
import clockCommentCom from "@/components/templates/clockIn/clockCommentCom.vue";
import clockTeaCommentCom from "@/components/templates/clockIn/clockTeaCommentCom.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import campDirectoryDialog from "@/components/templates/common/campDirectoryDialog.vue";
let html2canvas = null;
let getInfo = true
let curComIndex = ""; //当前评论的下标
let isLoading = false;
export default {
  name: "VoiceResult",
  props: [],
  components: {
    clockAswerAi,
    clockAswerContent,
    clockCommentCom,
    clockTeaCommentCom,
    loadingStatusTem,
    videoPopup,
    DaySign,
    campDirectoryDialog
  },
  data() {
    return {
      ttId:'',
      tpId:'',
      tlId:'',
      isDisAgainSign: 0,
      totalNum: 0,
      showAiResutl: false,
      isShowMasker:false,
      Info:'',
      completionLevel:'',
      fluencyScore:'',
      accuracyScore:'',
      refereeId:'',
      isShare:false,
      clockInId:'',
      examMainId:'',
      curDate:'',
      userId:localStorage.getItem("userId"),
      isCanvasOver:false,
      showSignDay:false,
      signDayInfo: {}, //日签信息
      imgCount:0,
      clockInInfo:'',
      myOperationShow: false,
      operationMenu: {},
      operationMenuLength: 0,
      smallImg: [
        {'url': require('@/assets/i/wap/clockIn/small1.png')},
        {'url': require('@/assets/i/wap/clockIn/small2.png')},
        {'url': require('@/assets/i/wap/clockIn/small3.png')},
        {'url': require('@/assets/i/wap/clockIn/small4.png')},
        {'url': require('@/assets/i/wap/clockIn/small5.png')},
        {'url': require('@/assets/i/wap/clockIn/small6.png')},
        {'url': require('@/assets/i/wap/clockIn/small7.png')},
      ],
      biglImg: [
        {'url': require('@/assets/i/wap/clockIn/big1.png')},
        {'url': require('@/assets/i/wap/clockIn/big2.png')},
        {'url': require('@/assets/i/wap/clockIn/big3.png')},
        {'url': require('@/assets/i/wap/clockIn/big4.png')},
        {'url': require('@/assets/i/wap/clockIn/big5.png')},
        {'url': require('@/assets/i/wap/clockIn/big6.png')},
        {'url': require('@/assets/i/wap/clockIn/big7.png')},
      ],
      longImgBgUrl:'',
      longImgBg: 0,
      bindPhoneSetting: null,
      imgData: {},
      currentVideoObj: {},
      curComId: "", ///当前评论ID
      comType: 1, //是否教师评论教师
      replyId: "", //回复人的昵称
      inputCom: "", //评论的输入内容
      replyName: "", //回复人的ID
      showComInput: false, //显示评论输入框
      showTeaCommentModal: false, //显示教师评论输入框
      playAduioSrc:'',
      resultInfo:'',
      resultIndex:0,
      enHwId:'',
      enDate:'',
      showVideo:false,
      enableLongAudio:0,
      campButtonStatus: {}, // 当前课程是否有上下节
    };
  },
  created() {
    utilJs.appShare(this);
  },
  computed:{
//是否分享入口进入，refereeId与userId相等
    refereeAndUser:function() {
      if ((this.isShare && (this.refereeId == this.userId)) || !this.isShare) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
      html2canvas = res.default;
    })
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        this.imgData = res;
      });
    }
    this.currentVideoObj = {};
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || "";
    this.tlId = this.$route.query.tlId || "";
    this.campDirectoryInitData()
    console.log('mounted')
  },
  activated() {
    console.log('路径变了这边游走那')
    setDocumentTitle("测评结果");
    this.curHwId = this.$route.query.curHwId;
    this.totalNum = this.$route.query.totalNum * 1 || 0;
    this.curDate = this.$route.query.curDate || '';
    this.examMainId = this.$route.query.examMainId || '';
    this.clockInId = this.$route.query.clockInId || '';
    this.refereeId = this.$route.query.refereeId || '';
    this.isShare = this.$route.query.isShare || false;
    this.workType = this.$route.query.workType || '';
    this.isPlayAudio = false;
    this.showAiResutl = true;
    this.showSignDay = false;
    this.longImgBg = 0
    this.currentVideoObj = {};
    this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ')'
    // this.getResultInfo();
    getBindPhoneSetting(global.ckFrom.clockIn).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getBaseConfig()
  },
  deactivated() {
    console.log(456789)
    this.isShowMasker = false
    this.showAiResutl = false;
    this.$loading.hide();
    this.showSignDay = false;
    this.$destroy('DaySign');
  },
  methods: {
    // 初始化训练营底部目录栏数据
    campDirectoryInitData() {
      this.$nextTick(() => {
        if (this.isLoading) {
          return;
        }
        this.isLoading = true;
        if (!!this.ttId && this.$refs.campDirectory) {
          this.$refs.campDirectory.initData({
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId
          }).then((data) => {
            this.isLoading = false;
            this.campButtonStatus = data
          }).catch(() => {
            this.isLoading = false;
          })
        }
      })
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      console.log('点击切换任务', type)
      if (this.$refs.campDirectory) {
        this.$refs.campDirectory.handleCampDirectory(type)
      }
    },
    //点赞
    clickZan(index) {
      if (isLoading) {
        return;
      }
      isLoading = true;
      //点赞自己
      let zanType = 0;
      let examMainId = "";
      // if (index == -1) {
        zanType = this.Info.hasZan == 1 ? 2 : 1;
        examMainId = this.Info.examMainId;
      // } else {
      //   zanType = this.studentWorkList[index].hasZan == 1 ? 2 : 1;
      //   examMainId = this.studentWorkList[index].examMainId;
      // }

      utilJs.getMethod(
        `${global.apiurl}signCard/clickZan/${examMainId}?zanType=${zanType}`,
        (res) => {
          isLoading = false;
          if (res.status == 1) {
            this.$showCjToast({
              text: zanType == 1 ? "点赞成功" : "取消点赞",
              type: "success",
              time: 1500
            });
            //点赞自己
            // if (index == -1) {
              this.$set(
                this.Info,
                "hasZan",
                zanType == 2 ? 0 : 1
              );
              if (zanType == 1) {
                this.Info.zanMan.push({
                  nickname: res.nickname,
                  userId:res.userId
                });
              } else {
                let zanArr = this.Info.zanMan.filter((item) => {
                  return item.userId != res.userId;
                });
                this.$set(this.Info, "zanMan", zanArr);
              }
          } else if (res.status == 2) {
            this.$showCjToast({
              text: res.message,
              type: "warn",
              time: 1500
            });
          } else {
            this.$showCjToast({
              text: '操作失败',
              type: "warn",
              time: 1500
            });
          }
        },
        (failRes) => {
          isLoading = false;
        }
      );
    },
    /**
    /**
     * 点击评论
     * index： -1 评论自己，其他:评论别人
     * cIndex： -1 评论别人的内容，其他：评论别人的评论
     */
    clickCom(index, cIndex, commentId, myAswerIndex, isTeacher) {
      console.log(index, cIndex)
      if (cIndex == -1 && (this.Info.isTeacher == 1 || this.Info.isTeacher == 2) && isTeacher) {
        curComIndex = index;
        this.resultInfo = this.Info;
        this.Info.showTime = 0
        console.log(index)
        this.resultIndex = myAswerIndex;
        this.showTeaCommentModal = true;
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        this.enHwId = this.Info.hwId
        this.enDate = this.Info.startDay
        return;
      }
      let examMainId = "";
      if (cIndex != -1) {
        this.comType = this.Info.commentArr[cIndex].type;
      }
      examMainId = this.Info.examMainId;
      this.replyId =
        cIndex == -1
          ? ""
          : this.Info.commentArr[cIndex].userId;
      this.replyName =
        cIndex == -1
          ? ""
          : this.Info.commentArr[cIndex].nickname;
      this.enHwId = this.Info.hwId
      this.enDate = this.Info.startDay
      curComIndex = index;
      if (this.curComId != examMainId) {
        this.inputCom = "";
      }
      this.curComId = examMainId;
      this.showComInput = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //评论成功
    commentSuccess(comData, type) {
      let content = {
        type: comData.type,
        content: comData.content,
        nickname: comData.nickname,
        replyName: this.replyName,
        replyUserId: this.replyId,
        userId: this.Info.userId,
        imgArr: comData.imgArr,
        audioArr: comData.audioArr,
        videoArr: comData.videoArr || [],
        headimgurl:comData.headimgurl,
        commentId:comData.commentId,
        encodeUserId:localStorage.getItem("userId"),
        createdAt:comData.commentTime,
      };
      this.Info.showTime = 1
      this.playAduioSrc = "";
      if (curComIndex == -1) {
        //评论自己
        this.Info.commentArr.push(content);
      } else {
        //评论别人
        if (comData.teacherCom) {
          //老师点评
          this.$set(this.Info, "isHot", comData.isHot);
          this.$set(this.Info, "rank", comData.rank);
          // this.$set(this.Info, "createdAt", comData.commentTime);
        }
        // if (comData.teacherCom && this.sortType == 5) {
        //   //老师点评，当前类型是未点评，则把当前点评的这条数据移除掉
        //   this.studentWorkList.splice(curComIndex, 1);
        // } else {
          this.Info.commentArr.push(content);
        // }
      }
      this.showTeaCommentModal = false;
      this.showComInput = false;
      this.replyName = "";
      this.inputCom = "";
      this.replyId = "";
    },
    // 点击开始播放音频
    clickPlayAudio(audioUrl) {
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        //document.getElementById("audio").play();
        utilJs.audioPlayFun(document.getElementById("audio"), "play");
      }
    },
    // //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    // //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    clickeDelete() {
      this.$cjConfirm({
        title: '提示',
        message: '删除后无法恢复，确定删除日记?',
        onConfirm:() => {
          utilJs.postMethod(
            global.apiurl + "signCard/deleteExamLog",
            { examMainId: this.Info.examMainId },
            res => {
              this.$refs.clockaswerai.getResultInfo()
            },
          );
        }
      })
    },
    clickOperationMenu(item) {
      if (item.value == 2) {
        this.clickeDelete()
      }
      if (item.value == 0) {
        this.clickReTest()
      }
    },
    showOprationSheet(index) {
      this.myOperationShow = true
    },
    calcOperation(item, index) {
      let temObj = []
      if (item.isDisAgainSign == 1) {
        temObj.push({name:'重测', value:0})
      }
      if (item.enableDelete == 1) {
        temObj.push({name:'删除', value:2})
      }
      this.operationMenu = temObj
      this.operationMenuLength = Object.keys(this.operationMenu).length
      this.showOprationSheet(index)
    },
    getBaseConfig() {
      let postUrl = `${global.apiurl}signCard/getBaseConfig?signColId=${this.clockInId}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isDisCheat = res.isDisCheat
        this.enableLongAudio = res.enableLongAudio
      });
    },
    goSpread() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: {
          // socailId: this.socialInfo.socialRoomId
          ckFrom: global.ckFrom.clockIn,
          cId: 0,
          extId: this.clockInId
        }
      })
    },
    chooseImgbg(index) {
      this.longImgBg = index
      this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ')'
      this.$nextTick(() => {
        this.clickBuildImg()
      });
    },
    //日签绘制完成
    canvasOver() {
      this.isCanvasOver = true;
      getInfo = true
      //判断是否自动弹出日签，可以自动弹出日签并且没有自动弹出过，则显示日签
      if (this.Info.isShowCard == 1) {
        let pushHwId = this.curHwId * 1;
        if (pushHwId == 0 || this.curDate != 0) {
          pushHwId = `${this.clockInId}/${this.curDate}`;
        }
        let clockSignCardList = localStorage.getItem("clockSignCard");
        let cardSignList =
          (clockSignCardList && JSON.parse(clockSignCardList)) || [];
        if (cardSignList.includes(pushHwId)) {
          this.showSignDay = false;
        } else {
          cardSignList.length < 99999
            ? cardSignList.push(pushHwId)
            : cardSignList.shift();
          localStorage.setItem("clockSignCard", JSON.stringify(cardSignList));
          this.$loading.hide();
          this.showSignDay = true;
        }
      }
    },
    //关闭日签
    closeSignDay() {
      this.showSignDay = false;
    },
    //获取日签信息
    getSignDayInfo(lat, lon) {
      if (getInfo) {
        getInfo = false
        if (this.Info.isShowCard == 1) {
          let pushHwId = this.curHwId * 1;
          if (pushHwId == 0 || this.curDate != "") {
            pushHwId = `${this.clockInId}/${this.curDate}`;
          }
          let clockSignCardList = localStorage.getItem("clockSignCard");
          let cardSignList =
            (clockSignCardList && JSON.parse(clockSignCardList)) || [];
          clearInterval(this._getLocationtime)
          if (cardSignList.includes(pushHwId)) {
            this.showSignDay = false;
            getInfo = true
          } else {
            this.$loading.show({
              text: "日签生成中"
            });
            utilJs.getMethod(
              `${global.apiurl}signCard/showDayCard/${this.clockInId}?lat=${lat}&lon=${lon}`,
              (res) => {
                let dateArr = res.day.split("-");
                let monthTime = dateArr[1];
                let dayTime = dateArr[2];
                let cardCover = "";
                if (res.enableImgLoop) {
                  cardCover = res.cardCoverArr;
                } else {
                  cardCover = res.cardCover;
                }
                let info = {
                  fontColor: res.fontColor,
                  type: res.type,
                  name: res.name,
                  nickname: res.nickname,
                  word: res.word || [],
                  isDefaultWord: res.isDefaultWord,
                  cardCover:
                    cardCover ||
                    "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/daysign_img.png",
                  dateStr: monthTime + "月" + dayTime + "日",
                  city: res.city || "未知",
                  headimgurl:
                    res.headimgurl || require("../../../assets/defult_head.png"),
                  userId: res.userId,
                  hasWork: res.hasWork,
                  qrcodeUrl: res.qrcodeUrl,
                  allDay: res.allDay || 0,
                  hasSignDay: res.hasSignDay || 0,
                  isBackMoney: res.payType == 4 ? 1 : 0,
                  overPercent: res.overstep,
                  daySignType: res.daySignType || [],
                  dcStyleType: res.dcStyleType || 4,
                  enableDcWord: res.enableDcWord,
                  daySignContent: res.daySignContent,
                  daySignShowData: res.daySignShowData,
                  monthTime:monthTime,
                  dayTime:dayTime,
                  timeType: res.timeType,
                };
                this.signDayInfo = info;
                this.$refs.daysign.signDayInfoStart(this.signDayInfo)
              }
            );
          }
        }
      }
    },
    clickImg(event) {
      event.preventDefault()
      return false
    },
    clickGohomeworke() {
      if (this.Info.isIn == 1) {
        let q = {
          workType: this.workType,
          clockInId: this.clockInId,
          fromDetail: 0,
        }
        if (this.workType == 1) {
          q.curDate = this.curDate;
        }
        if (this.workType == 2 || this.workType == 3) {
          q.curId = this.workType == 2 ? this.curHwId : (this.workType == 3 ? this.Info.lastHwId : '');
        }
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: `/homePage/clockIn/stuHomeWork`,
          query: q
        });
      } else {
        let q = {clockInId: this.clockInId}
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/clockInDetail",
          query: q
        });
      }
    },
    closeShowMasker() {
      this.isShowMasker = false;
    },
    // 生成长图
    clickBuildImg() {
      let that = this
      this.$loading.show({
        text: "长图生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      this.Info.nickname = this.Info.nickname.length > 10 ? this.Info.nickname.substring(0, 10) + '...' : this.Info.nickname;
      this.Info.name = this.Info.name.length > 10 ? this.Info.name.substring(0, 10) + '...' : this.Info.name;
      this.$nextTick(() => {
        setTimeout(() => {
          // this.$loading.hide();
          that.canvas();
        }, 1000);
      });
    },
    canvas() {
      let domTest = document.getElementById("canvas1");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight - 1, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    canvasToImage(ctx) {
      try {
        // let dataURL = ctx.canvas.toDataURL("image/jpg");
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.querySelector("#longSpreadImg").innerHTML = '';
        document.querySelector("#longSpreadImg").innerHTML = '<img src="' + dataURL + '" class="c-ww500 c-m-0auto c-br20" alt>'
        // document.getElementById("longSpreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        setTimeout(() => {
          this.$loading.hide();
          this.isShowMasker = true;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    getInfo(isDisAgainSign) {
      console.log(`********${isDisAgainSign}**`)
      this.isDisAgainSign = isDisAgainSign;
    },
    InfoRes(res, Level, fluencyScore, accuracyScore) {
      this.Info = res
      this.wechatShare();
      //判断签到信息是否为空
      if (
        Object.keys(this.signDayInfo).length == 0 &&
        res.dayCardStatus == 1 && this.refereeAndUser
      ) {
        this.$nextTick(() => {
          this.getlocationpoint();
        });
      }
      this.completionLevel = Level
      this.fluencyScore = fluencyScore
      this.accuracyScore = accuracyScore
    },
    //获取地理位置
    getlocationpoint() {
      clearInterval(this._getLocationtime)
      if (this.Info.daySignShowData.isShowArea == 0 || utilJs.isAndroidApp() || utilJs.isIOSAppALL()) {
        this.getSignDayInfo("", "");
        return;
      }
      console.log(1111111111111111)
      this._getLocationtime = setTimeout(() => {
        this.getSignDayInfo("", "");
      }, 2000);
      wxUtilJs.getLocation().then(
        (res) => {
          this.getSignDayInfo(res.latitude, res.longitude);
        },
        (failRes) => {
          this.getSignDayInfo("", "");
        }
      );
    },
    clickGoBack() {
      this.$router.go(-1);
    },
    //重测
    clickReTest() {
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/voiceQue",
        query: {
          curHwId: this.curHwId,
          isReTest: 1,
          curDate: this.curDate,
          examMainId: this.examMainId,
          clockInId: this.clockInId,
          workType:this.workType
        }
      });
    },
    //分享curHwId=37566&examMainId=3347448&curDate=2022-06-14%2000%3A00%3A00&clockInId=1105517&refereeId=7r63ozwl&isShare=1&totalNum=1&workType=1
    wechatShare: function () {
      let title = this.Info.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?curHwId=${this.curHwId}&examMainId=${this.examMainId}&curDate=${this.curDate}&clockInId=${this.clockInId}&isShare=1&totalNum=${this.totalNum}&workType=${this.workType}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.wechatConfig(
        shareIndexData.shareUrl,
        shareIndexData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.Info.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?curHwId=${this.curHwId}&examMainId=${this.examMainId}&curDate=${this.curDate}&clockInId=${this.clockInId}&isShare=1&totalNum=${this.totalNum}&workType=${this.workType}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${this.clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.appShareTrue(
        shareIndexData.title,
        shareData.shareImg,
        shareIndexData.shareUrl,
        shareData.shareDesc
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-maxhlongImg{
  max-height: 20rem;
}
.anvasBox{
  width: 640px;
  height: 984px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent{
  width: 500px;
  /* padding-bottom:40px ; */
  background-size: 100% 100%;
  position: relative;
}
.anvasContentbg{
  /* background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/imglong.png"); */
  background-size: cover;
  background-repeat-y: repeat;
}
.dialog-demo /deep/ .weui-dialog{
  background-color: transparent;
}
.bottom-triangle {
  top: 60px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 38px;
  border-style: solid;
  border-color: #fbb449 transparent transparent transparent;
}
.bottom-triangle-text {
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
}
.c-p-tm12{
  top: -1.2rem;
}
.c-p-rm12{
  right: -1.2rem;
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}
.c-p-t26{top:0.65rem;}
.first {
  width: 4px;
  height: 4px;
  background: #cccccc;
  top: 36px;
  left: 36px;
}
.second {
  width: 20px;
  height: 20px;
  top: 28px;
  left: 28px;
}
.third {
  width: 32px;
  height: 32px;
  top: 20px;
  left: 20px;
}
</style>
